<template>
  <div class="dashboard-editor-container">
    <el-row :gutter="10" style="padding: 10px">
      <el-col :span="8">
        <div class="chart-wrapper">
          <nature :selCompanyDataNatureList="selCompanyDataNatureList" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <scale :selCompanyDataScaleList="selCompanyDataScaleList" />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="chart-wrapper">
          <authentication :selCompanyDataAuditList="selCompanyDataAuditList" />
        </div>
      </el-col>
      <!-- <el-col :span="6">
        <div class="chart-wrapper">
          <member :selCompanyDataSectorList="selCompanyDataSectorList" />
        </div>
      </el-col> -->
    </el-row>
    <el-row class="chart-wrapper" style="margin: 10px; background-color: #fff">
      <el-col :span="12"
        ><areas :selCompanyDataAddressList="selCompanyDataAddressList"
      /></el-col>
      <el-col :span="12">
        <el-table :data="selCompanyDataAddressList" style="width: 100%" border>
          <el-table-column type="index" prop="prop" label="排名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="地区" width="width" align="center">
          </el-table-column>
          <el-table-column prop="count" label="企业数" width="width" align="center">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="background-color: #fff; margin: 10px"
    >
      <el-col :span="12"
        ><industry :selCompanyDataAddressList="selCompanyDataAddressList"
      /></el-col>
      <el-col :span="12">
        <el-table :data="selCompanyDataAddressList" style="width: 100%" border>
          <el-table-column type="index" prop="prop" label="排名" width="100" align="center">
          </el-table-column>
          <el-table-column prop="name" label="行业" width="width" align="center">
          </el-table-column>
          <el-table-column prop="count" label="企业数" width="width" align="center">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="background-color: #fff; margin: 10px"
    >
      <addTrend :selCompanyDataAddList="selCompanyDataAddList" />
    </el-row>
    <el-row
      class="chart-wrapper"
      :gutter="20"
      style="background-color: #fff; margin: 10px"
    >
      <liveness :selCompanyDataActiveList="selCompanyDataActiveList"/>
    </el-row>
  </div>
</template>

<script>
import nature from "./components/nature";
import scale from "./components/scale";
import authentication from "./components/authentication";
import member from "./components/member";
import areas from "./components/area";
import industry from "./components/industry";
import addTrend from "./components/addTrend";
import liveness from "./components/liveness";
import {
  selCompanyDataNatureApi,
  selCompanyDataScaleApi,
  selCompanyDataAuditApi,
  selCompanyDataSectorApi,
  selCompanyDataAddressApi,
  selCompanyDataAddApi,
  selCompanyDataActiveApi,
} from "@/api/portrait";
export default {
  components: {
    nature,
    scale,
    authentication,
    member,
    areas,
    industry,
    addTrend,
    liveness,
  },
  data() {
    return {
      selCompanyDataNatureList: [],
      selCompanyDataScaleList: [],
      selCompanyDataAuditList: [],
      selCompanyDataSectorList: [],
      selCompanyDataAddressList: [],
      selCompanyDataAddList: [],
      selCompanyDataActiveList: [],
    };
  },
  created() {
    this.selCompanyDataNature();
    this.selCompanyDataScale();
    this.selCompanyDataAudit();
    this.selCompanyDataSector();
    this.selCompanyDataAddress();
    this.selCompanyDataAdd()
    this.selCompanyDataActive();
  },
  methods: {
    // 企业性质分布
    async selCompanyDataNature() {
      const res = await selCompanyDataNatureApi();
      this.selCompanyDataNatureList = res.data;
    },
    // 企业规模分布
    async selCompanyDataScale() {
      const res = await selCompanyDataScaleApi();
      this.selCompanyDataScaleList = res.data;
    },
    // 认证企业分布
    async selCompanyDataAudit() {
      const res = await selCompanyDataAuditApi();
      this.selCompanyDataAuditList = res.data;
    },
    // 会员企业分布
    async selCompanyDataSector() {
      const res = await selCompanyDataSectorApi();
      this.selCompanyDataSectorList = res.data;
    },
    // 总览分析-地区
    async selCompanyDataAddress() {
      const res = await selCompanyDataAddressApi();
      this.selCompanyDataAddressList = res.data;
    },
    // 总览分析-新增
    async selCompanyDataAdd() {
      const res = await selCompanyDataAddApi();
      this.selCompanyDataAddList = res.data;
    },
    // 总览分析-活跃度
    async selCompanyDataActive() {
      const res = await selCompanyDataActiveApi();
      this.selCompanyDataActiveList = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  background-color: #fcfcfc;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.el-table {
  max-height: 300px; /* 限制表格的最大高度 */
  overflow-y: auto; /* 添加垂直滚动条 */
}
</style>
